<template>
	<el-container>
		<el-aside width="150px" v-loading="showGrouploading">
			<el-container>
				<el-main class="nopadding">
					<div class="status-items">
						<a href="javascript:;" :key="l.value" v-for="(l, index) in groupList"
						   @click="statusChange(index)" :class="l.checked ? 'on' : ''">
							{{ l.label }}</a>
					</div>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)"></el-button>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-form inline v-model="search" label-position="right">
							<el-form-item label="关键词">
								<el-input v-model="search.keyWord" placeholder="请输入名称、标题等关键词" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTableGdshop ref="table" tableName="goodsTable" :apiObj="apiObj" stripe remoteSort remoteFilter
							   :params="tableParams" :column="tableColumn">
					<template #tixian_info="scope">
						<div>提现金额：￥{{ (scope.row.money / 100).toFixed(2) }}</div>
						<div>手续费：￥{{ (scope.row.handling_fee / 100).toFixed(2) }}</div>
						<div>
							实际到账：￥{{ (scope.row.amount_received / 100).toFixed(2) }}
						</div>
					</template>
					<template #time="scope">
						<div>申请：{{ showDateTime(scope.row.apply_time) }}</div>
						<div>到账：{{ showDateTime(scope.row.complete_time) }}</div>
						<div>处理：{{ showDateTime(scope.row.handle_time) }}</div>
					</template>
					<template #status="scope">
						{{ getFenxiaoWithdrawStatusText(scope.row.status) }}
					</template>

					<el-table-column label="操作" fixed="right" align="center" width="100">
						<template #default="scope">
<!--							<div>
								<el-button size="mini" class="btn-link" type="text" @click="showDialog(scope.row)">查看</el-button>
							</div>-->
							<div v-show="scope.row.status == 1">
								<el-button
									size="mini"
									class="btn-link"
									type="text"
									@click="handleChange(scope.row, true)"
								>通过
								</el-button
								>
							</div>
							<div v-show="scope.row.status == 1">
								<el-button
									size="mini"
									class="btn-link"
									type="text"
									@click="handleChange(scope.row, false)"
								>拒绝
								</el-button
								>
							</div>
						</template>
					</el-table-column>
				</scTableGdshop>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import {ElMessageBox} from "element-plus";

export default {
	name: "fenxiao-withdraw",
	data() {
		return {
			showGrouploading: false,
			apiObj: this.$API.fenxiao.withdraw,
			groupList: [
				{
					label: "全部",
					value: 0,
					checked: false
				},
				{
					label: "待审核",
					value: 1,
					checked: true
				},
				{
					label: "已审核",
					value: 90,
					checked: false
				},
				{
					label: "已到账",
					value: 99,
					checked: false
				},
				{
					label: "已拒绝",
					value: 2,
					checked: false
				}
			],
			tableParams: {
				list_type: 1,
			},
			search: {
				keyWord: "",
			},
			tableColumn: [
				{
					prop: "withdraw_no",
					label: "提现流水编号",
					align: "left"
				},
				{
					prop: "fu_name",
					label: "分销商",
					width: 100
				},
				{
					prop: "tixian_info",
					label: "提现信息"
				},
				{
					prop: "status",
					label: "状态",
					width: 100
				},
				{
					prop: "time",
					label: "时间",
					align: "left",
					width: 200
				},
			]
		}
	},
	methods: {
		showDateTime(_time) {
			if (!_time) {
				return "-";
			}
			return this.$TOOL.dateFormat(_time * 1000);
		},
		getFenxiaoWithdrawStatusText(_status) {
			_status = _status.toString();
			switch (_status) {
				case "1":
					return "待审核";
				case "2":
					return "拒绝";
				case "90":
					return "已审核";
				case "99":
					return "已到账";
			}
			return "";
		},
		tableRefresh(isClaer = false) {
			if (isClaer === true) {
				this.search.keyWord = '';
				this.$refs.table.refresh();
			} else {
				this.$refs.table.refresh();
			}
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		statusChange(index) {
			this.groupList.map((e, i) => {
				e.checked = index === i
				if (e.checked) {
					this.tableParams.list_type = e.value
				}
			})
			this.$refs.table.refresh();
		},
		showDialog(row) {
			console.log(row);
		},
		handleChange(_row, _type) {
			let tipText = "拒绝";
			let postData = {
				id: _row.id,
				status: 2
			};
			if (_type === true) {
				tipText = "通过";
				postData.status = 90;
			}
			ElMessageBox.confirm("确认" + tipText + "申请吗？", "提醒", {
				confirmButtonText: "确认",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					// 确认
					this.$API.fenxiao.withdraw.changeHandle(postData).then(res => {
						if (res.code === 0) {
							this.$message.success("操作成功");
							_row.status = postData.status;
						} else {
							this.$message.error(res.message);
						}
					});
				})
				.catch(() => {
					// 取消
				});
		}
	}
}
</script>

<style lang="scss" scoped>
.status-items {
	margin-top: 10px;
}

.status-items a {
	display: block;
	line-height: 36px;
	text-align: center;
	color: #000;
	background-color: #fff;
	margin-bottom: 1px;
	font-size: 12px;

	&:hover {
		background-color: #85a1f8;
		color: #fff;
	}

	&.on {
		background-color: #ecf5ff;
		color: #409eff;
	}
}

.goods-stock-box {
	text-align: center;

	.btn-edit {
		position: absolute;
		margin-top: -25px;
		right: 10px;
	}
}

.goods-price {
	color: #f56c6c;
}

.btn-edit {
	i {
		cursor: pointer;

		&:hover {
			color: #00a0e9;
		}
	}
}

.goods-price-box {
	text-align: center;

	.btn-edit {
		position: absolute;
		margin-top: -25px;
		right: 10px;
	}
}

.active {
	display: none;
}

.hover-btn:hover {
	.active {
		display: inline;
	}
}

.right-panel-search {
	.el-form-item--default {
		margin-bottom: 0;
	}
}
</style>
